@import "../../config";
@import "./animate";

// 分隔符颜色
$contentColor: #888888;
$darkColor: #b0b0b0;

// 主页时间组件
.home-time {
  position: absolute;
  top: 140px;
  left: 50%;
  padding: 0 10px;
  color: #ffffff;
  font-size: $fontBig;
  line-height: 1;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
  user-select: none;
  cursor: pointer;
  transform: translateX(-50%) scale(1);
  z-index: 100;

  // 鼠标进入动画
  &.time-in {
    animation: zoomIn 0.4s forwards;
  }

  // 鼠标离开动画
  &.time-out {
    animation: zoomOut 0.4s forwards;
  }

  // 下划线过渡效果
  &::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    display: block;
    width: 0;
    height: 2px;
    background: rgba(112, 192, 0, 1.0);
    transition: all 0.25s;
  }

  &:hover::after {
    width: 100%;
    left: 0;
  }

  // 左侧部分
  .left {
    margin-right: 10px;
    display: inline-block;
    line-height: 1.2;
    font-size: $fontSmall;
    color: $darkColor;
  }

  // 日期分隔符
  .year::after, .month::after {
    content: "/";
    color: $contentColor;
  }

  // 时间分隔符
  .hour::after, .minute::after {
    content: ":";
    color: $contentColor;
  }

  // “秒”的颜色
  .second {
    color: $darkColor;
  }
}
